<script setup>
import { Delete, Edit, InfoFilled, Lock, Plus, View, Close, Check,Operation } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref, reactive, onMounted } from 'vue';
import {del, get, post, put} from '../../api/http'

const userList = reactive([])
const keyword = ref('')
const showUserStatus = ref(false)
const showUserRole = ref(false)
const showAccountInfo = ref(false)
const currentUser = reactive({})
const roleList = reactive([])
const selectedRole = reactive([])
const showRegister = ref(false)
const user = reactive({})
const selectedList = reactive({arr:[]})
const currentPage = ref(1)
const total = ref(0)
const loading = ref(false)

const getUserList = () => {
    loading.value = true
    get('user/list',{keyword:keyword.value,pageNum:currentPage.value,pageSize:10}).then(res=>{
        if(res.status){
            userList.value = res.data.list
            total.value = res.data.total
        }else{
            ElMessage({type:'error',message:res.msg})
        }
        loading.value = false
    })
}

const getRoleList = () => {
    get('role/list').then(res=>{
        if(res.status){
            roleList.value = res.data.list
        }else{
            ElMessage({type:'error',message:res.msg})
        }
    })
}

const clickStatus = (data) => {
    showUserStatus.value = true;
    currentUser.value = data;
}

const clickRole = (data) => {
    getRoleList()
    showUserRole.value = true;
    let temp = []
    data.roleList.forEach(element => {
        temp.push(element.id)
    });
    selectedRole.value = temp;
    currentUser.value = data;
}

const clickEdit = (data) => {
    showAccountInfo.value = true;
    currentUser.value = data;
}

const changeRole = (data) => {
    console.log(data)
    console.log(selectedRole.value)
}

const updateUser = () => {
    put('user/set',currentUser.value).then(res=>{
        ElMessage({type:res.status?'success':'error',message:res.msg})
        if(res.status){
            getUserList();
            showUserStatus.value = false;
        }
    })
}

const bindRoleForUser = () => {
    let userIds = [currentUser.value.id]
    let roleIds = selectedRole.value
    post('user/bindRole',{userIds:userIds,roleIds:roleIds}).then(res=>{
        ElMessage({type:res.status?'success':'error',message:res.msg});
        if(res.status){
            getUserList();
            showUserRole.value = false
        }
    })
}

const removeUser = (id) => {
    ElMessageBox.confirm('该操作会永久删除该用户相关信息，是否继续？','提示',{type:'warning'}).then(()=>{
        if(id != -1){
            post('user/option/remove/true',[id]).then(res=>{
                ElMessage({type:res.status?'success':'error',message:res.msg});
                if(res.status){
                    getUserList();
                }
            })
        }else{
            post('user/option/remove/true',selectedList.arr).then(res=>{
                ElMessage({type:res.status?'success':'error',message:res.msg});
                if(res.status){
                    getUserList();
                }
            })
        }
    })
}

const register = () => {
    post('/user/register', user).then(res=>{
        ElMessage({type:res.status?'success':'error', message: res.msg})
        if(res.status){
            getUserList()
            showRegister.value = false
        }
    })
}

const handleSelectChange = (list) => {
    let temp = []
    list.forEach(element => {
        temp.push(element.id)
    });
    selectedList.arr = temp
    console.log(selectedList)
}

const addUser = () => {
    showRegister.value = true;
}

const handlePageChange = (pageNum) => {
    currentPage.value = pageNum
    getUserList()
}

onMounted(()=>{
    getUserList()
})

</script>
<template>
    <main v-blog-title data-title="用户管理">
        <div class="toolBar">
            <el-input v-model="keyword" @input="getUserList" style="width: 300px; margin-right: 10px;" placeholder="关键字搜索"></el-input>
            <el-button @click="addUser" type="primary" :icon="Plus">添加用户</el-button>
            <el-button @click="removeUser(-1)" type="danger" :icon="Delete">删除用户</el-button>
            <el-button type="warning" :icon="Lock">锁定用户</el-button>
        </div>
        <div class="content" v-loading="loading">
            <el-table :data="userList.value" border @selection-change="handleSelectChange">
                <el-table-column type="selection" width="40" />
                <el-table-column fixed label="用户名">
                    <template #default="scope">
                        <span style="font-weight: bold; cursor: pointer;">{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="邮箱" prop="email"></el-table-column>
                <el-table-column label="邮箱状态" width="100" align="center">
                    <template #default="scope">
                        <div class="col-item">
                            <el-icon v-if="!scope.row.emailStatus" style="color:red;"><Close/></el-icon>
                            <el-icon v-if="scope.row.emailStatus" style="color:green;"><Check/></el-icon>
                            <span style="font-size: 14px;">{{ scope.row.emailStatus?'已验证':'未验证' }}</span>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="注册日期" align="center" prop="createTime" width="200"></el-table-column>
                <el-table-column label="锁定" width="100" align="center">
                    <template #default="scope">
                        <div class="col-item">
                            <el-icon v-if="!scope.row.accountNonLocked" style="color:red;"><Close/></el-icon>
                            <el-icon v-if="scope.row.accountNonLocked" style="color:green;"><Check/></el-icon>
                            <span style="font-size: 14px;">{{ scope.row.accountNonLocked?'未锁定':'锁定' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="账号过期" align="center" width="100">
                    <template #default="scope">
                        <div class="col-item">
                            <el-icon v-if="!scope.row.accountNonExpired" style="color:red;"><Close/></el-icon>
                            <el-icon v-if="scope.row.accountNonExpired" style="color:green;"><Check/></el-icon>
                            <span style="font-size: 14px;">{{ scope.row.accountNonExpired?'未过期':'已过期' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="密码过期" width="100" align="center">
                    <template #default="scope">
                        <div class="col-item">
                            <el-icon v-if="!scope.row.credentialsNonExpired" style="color:red;"><Close/></el-icon>
                            <el-icon v-if="scope.row.credentialsNonExpired" style="color:green;"><Check/></el-icon>
                            <span style="font-size: 14px;">{{ scope.row.credentialsNonExpired?'未过期':'已过期' }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" width="100" align="center">
                    <template #default="scope">
                        <div class="col-item">
                            <el-icon v-if="!scope.row.enabled" style="color:red;"><Close/></el-icon>
                            <el-icon v-if="scope.row.enabled" style="color:green;"><Check/></el-icon>
                            <span style="font-size: 14px;">{{ scope.row.enabled?'已启用':'未启用' }}</span>
                        </div>
                        
                    </template>
                </el-table-column>
                <el-table-column label="更多操作" fixed="right" width="400" align="center">
                    <template #default="scope">
                        <el-button @click="clickStatus(scope.row)" :icon="Operation" size="small" type="default">状态</el-button>
                        <el-button @click="clickRole(scope.row)" :icon="View" size="small" type="default">角色</el-button>
                        <el-button @click="clickEdit(scope.row)" :icon="Edit" size="small" plain type="primary">编辑</el-button>
                        <el-button @click="removeUser(scope.row.id)" :icon="Delete" size="small" plain type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin: 10px;" small background @current-change="handlePageChange" layout="prev, pager, next" :total="total"></el-pagination>
            <el-dialog width="40%" title="用户状态" v-model="showUserStatus">
                <el-form label-width="200" label-position="left">
                    <el-form-item label="账号是否未过期">
                        <el-switch v-model="currentUser.value.accountNonExpired"></el-switch>
                    </el-form-item>
                    <el-form-item label="密码是否未过期">
                        <el-switch v-model="currentUser.value.credentialsNonExpired"></el-switch>
                    </el-form-item>
                    <el-form-item label="账号是否未锁定">
                        <el-switch v-model="currentUser.value.accountNonLocked"></el-switch>
                    </el-form-item>
                    <el-form-item label="账号是否启用">
                        <el-switch v-model="currentUser.value.enabled"></el-switch>
                    </el-form-item>
                    <el-form-item label="邮箱是否激活">
                        <el-switch v-model="currentUser.value.emailStatus"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <div style="width:100%; text-align: right;">
                            <el-button @click="showUserStatus=false" type="info" style="width:100px">关闭</el-button>
                            <el-button @click="updateUser" type="primary" style="width:100px">更新</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="角色信息" v-model="showUserRole">
                <div style="width:100%; text-align: center;">
                    <el-transfer @change="changeRole" :titles="['所有角色','绑定角色']" :props="{key:'id',label:'roleName'}" v-model="selectedRole.value" :data="roleList.value" />
                </div>
                <div style="width:100%; text-align: right;">
                    <el-button @click="showUserRole=false" type="info" style="width:100px">关闭</el-button>
                    <el-button @click="bindRoleForUser" type="primary" style="width:100px">更新</el-button>
                </div>
            </el-dialog>
            <el-dialog width="40%" title="账号编辑" v-model="showAccountInfo">
                <el-form label-position="right" label-width="100">
                    <el-form-item label="用户名">
                        <el-input v-model="currentUser.value.username" placeholder="用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="currentUser.value.email" placeholder="邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="重置密码">
                        <el-input v-model="currentUser.value.password" type="password" placeholder="新密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="width:100%; text-align: right;">
                            <el-button type="info" style="width:100px" @click="showAccountInfo=false">关闭</el-button>
                            <el-button @click="updateUser" type="primary" style="width:100px">更新</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog width="30%" title="注册用户" v-model="showRegister">
                <el-form>
                    <el-form-item label="账号">
                        <el-input v-model="user.username" placeholder="输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input v-model="user.email" placeholder="输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="user.password" type="password" placeholder="输入密码"></el-input>
                    </el-form-item>
                    <div style="width: 100%; text-align: right; margin-top: 10px;">
                        <el-button @click="showRegister = false" type="info">取消</el-button>
                        <el-button @click="register" type="primary">确认</el-button>
                    </div>
                </el-form>
            </el-dialog>
        </div>
    </main>
</template>
<style scoped>
.col-item{
    display: flex;
    align-items: center;
    justify-content: center;
}
.col-item:deep(.el-icon){
    padding: 0 5px;
}
.toolBar{
    padding: 10px;
}
.content{
    margin: 10px;
}
</style>